<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <!-- basic styles -->
        <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
        <link rel="stylesheet" href="../assets/css/ace.min.css" />
        <link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
        <link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
        <link rel="stylesheet" type="text/css" media="all" href="../assets/js/date-time/daterangepicker-bs3.css"/>
        <style>
            .search_bar{
                padding-bottom: 5px;
                width:100%;
                margin: 0px;
            }
            .search_bar div{
                float: left;
                margin-left: 10px;
                margin-top: 5px;
            }
            .search_bar div strong{
                font-weight: lighter;
                padding-right: 3px;
            }
            .search_bar div input{
                width:160px;
            }
            .search_bar div select{
                width:160px;
            }
            .search{
                border-width:4px;
            }
            .centen{text-align: center}
            .dialog_textarea{
                width: 98%;
                height:150px;
                padding: 1%;
            }
        </style>
    </head>
    <body>
        <div class="main-container">
            <div class="col-xs-12">
                <h3 class="header smaller lighter blue">用户操作日志</h3>
                <div class="row search_bar">
                    <!--起始时间:-->
                    <div>
                        <strong>起始时间:</strong>
                        <input type="text" id="startTime" />
                    </div>
                    <!--结束时间:-->
                    <div>
                        <strong>结束时间:</strong>
                        <input type="text" id="endTime" />
                    </div>
                    <!--策略类型:-->
                    <div>
                        <strong>用户选择:</strong>
                        <select id="username">
                            <option value="">全选</option>
                        </select>
                    </div>
                    <!--查&nbsp;询-->
                    <div>
                        <button class="btn btn-success btn-xs search" onclick="search()">查&nbsp;询</button>
                    </div>
                </div>
                <div class="table-header">
                    日志查看
                </div>
                <div class="table-responsive">
                    <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>用户名</th>
                                <th>操作时间</th>
                                <th>操作内容</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script src="../assets/js/jquery.js"></script>
        <script src="../assets/js/bootstrap.min.js"></script>
        <!-- page specific plugin scripts -->
        <script src="../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="../assets/js/jquery.dataTables.min.js"></script>
        <script src="../assets/js/jquery.dataTables.bootstrap.js"></script>
        <script src="../assets/js/date-time/moment.js"></script>
        <script src="../assets/js/date-time/daterangepicker.js"></script>
        <script src="../assets/js/Base64.js"></script>
        <script type="text/javascript">
                            var base64 = new Base64();
                            var oTable1;
                            function showTable(url) {
                                var oper = '';
                                oper += "<a class='blue' href='javascript:void(0)' title='查看' '>";
                                oper += "    <i class='icon-pencil bigger-130'></i>";
                                oper += "</a>";

                                if (oTable1) {
                                    oTable1.fnDestroy();
                                }
                                oTable1 = $('#sample-table-2').dataTable({
                                    "aoColumns": [
                                        {"bSortable": false, "sWidth": "100px", "sClass": "centen"},
                                        {"bSortable": false, "sWidth": "100px", "sClass": "centen"},
                                        {"bSortable": false, "sWidth": "200px", "sClass": "centen"},
                                        {"bSortable": false, "sWidth": "600px", "sClass": "centen"}
                                    ],
                                    "bFilter": false,
                                    "bSort": false,
                                    "bProcessing": true,
                                    "bServerSide": true,
                                    "sAjaxSource": url,
                                    "sAjaxDataProp": "aaData"
                                });
                                $('#sample-table-2').css("width", "100%");
                            }
                            ;
                            //时间格式转换为时间戳
                            function js_strto_time(time) {
                                var new_str = time.replace(/:/g, '-');
                                new_str = new_str.replace(/ /g, '-');
                                new_str = new_str.replace(/\//g, '-');
                                var arr = new_str.split("-");
                                var datum = new Date(Date.UTC(arr[0], arr[1] - 1, arr[2], arr[3] - 8, arr[4], arr[5]));
                                return strtotime = datum.getTime() / 1000;
                            }
                            //转换为正常时间格式
                            function tr_time(str) {
                                str = str.split(" ");
                                var yymmdd = str[0];
                                var hh = str[1].split(":")[0];
                                var mi = str[1].split(":")[1];
                                var astr = str[2];
                                if (astr == "PM") {
                                    hh = 12 + parseInt(hh);
                                }
                                return yymmdd + " " + hh + ":" + mi + ":00";
                            }
                            //时间戳数据转换为时间格式
                            function js_date_time(unixtime) {
                                var timestr = new Date(parseInt(unixtime) * 1000);
                                var datetime = timestr.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
                                if (datetime.indexOf("上午") != -1) {
                                    datetime = datetime.replace(/上午/g, "");
                                    datetime = datetime.split(":")[0] + ":" + datetime.split(":")[1];
                                    datetime = datetime + " AM"
                                }
                                if (datetime.indexOf("下午") != -1) {
                                    datetime = datetime.replace(/下午/g, "");
                                    datetime = datetime.split(":")[0] + ":" + datetime.split(":")[1];
                                    datetime = datetime + " PM"
                                }
                                return datetime;
                            }
                            //获取所有用户
                            function getUserList() {
                                $.ajax({
                                    type: "GET",
                                    async: false,
                                    url: "../action/user/list.action",
                                    data: {},
                                    dataType: "json",
                                    success: function(data) {
                                        $("#username").html("");
                                        $("#username").append("<option value='all'>全选</option>");
                                        for (var i in data) {
                                            $("#username").append("<option value='" + data[i].name + "'>" + data[i].name + "</option>")
                                        }
                                    }
                                });
                            }
                            function search() {
                                var obj = {};
                                obj.startTime = tr_time($("#startTime").val());
                                obj.startTime = js_strto_time(obj.startTime)+"000";
                                obj.endTime = tr_time($("#endTime").val());
                                obj.endTime = js_strto_time(obj.endTime)+"000";
                                obj.username = $("#username").val();
                                var url = "../action/user/query_user_operation_servlet.do?json=" + JSON.stringify(obj);
                                showTable(url);
                            }
                            jQuery(function($) {
                                //时间插件
                                var date = new Date();
                                var time = date.getTime() + "";
                                time = time.substr(0, 10);
                                time = parseInt(time);
                                $('#startTime').val(js_date_time(time));
                                $('#endTime').val(js_date_time(time));
                                $('#startTime').daterangepicker({
                                    timePicker: true,
                                    singleDatePicker: true,
                                    timePickerIncrement: 1,
                                    format: 'YYYY/MM/DD h:mm A'
                                });
                                $('#endTime').daterangepicker({
                                    timePicker: true,
                                    singleDatePicker: true,
                                    timePickerIncrement: 1,
                                    format: 'YYYY/MM/DD h:mm A'
                                });
                                getUserList();
                            });

        </script>
    </body>
</html>
